<template>
  <div>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple" align="center">
          <img :src="product.pimg" width="300px">
        </div>
      </el-col>

      <el-col :span="16">
        <div class="grid-content bg-purple-light">
          <!--商品名称-->
          <el-row>
            <el-col :span="4"><div class="grid-content bg-purple">
             <h1>商品名称</h1>
            </div></el-col>
            <el-col :span="11"><div class="grid-content bg-purple-light">
              <h1>{{product.pname}}</h1>
            </div></el-col>
          </el-row>

          <!-- 商品价格-->
          <el-row>
            <el-col :span="4"><div class="grid-content bg-purple">
              <h1>商品价格</h1>
            </div></el-col>
            <el-col :span="11"><div class="grid-content bg-purple-light">
              <h1>{{product.price}}</h1>
            </div></el-col>
          </el-row>
          <br/><br/>
          <!-- 加入购物车-->
          <el-row>
            <br>
            <el-col :span="4"><div class="grid-content bg-purple">
              <el-input-number v-model="num"  :min="1" :max="10"></el-input-number>
            </div></el-col>
            <el-col :span="11"><div class="grid-content bg-purple-light">
              <el-button type="warning" @click="getCar">加入购物车</el-button>

            </div></el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    export default {
        name: "Productinfo",
        data() {
            return{
            product:JSON.parse(sessionStorage.getItem("product")),
                num:1
            }
        },
        methods:{
            getCar(){
                //将用户id和商品id,商品数量传到购物车页面
                var pro={
                    userId:this.$store.getters.getUser.userId,
                    pid:this.product.pid,
                    count: this.num

                }
                //将商品加入购物车
                var vm = this;
                this.axios.post("http://localhost:8083/car/addCar?userId="+pro.userId+"&pid="+pro.pid+"&count="+pro.count).then(function (res) {
                    sessionStorage.setItem("pro",JSON.stringify(pro));
                    vm.$router.push("Car")
                })


            }
        }
    }
</script>

<style scoped>

</style>
